<template>
  <div>
    <el-card>
      <!-- 搜索区域 -->
      <el-form
        :inline="true"
        :model="queryData"
        :rules="formRules"
        ref="form"
        class="demo-form-inline"
      >
        <el-row>
          <el-col :span="22">
            <el-form-item prop="subjectName" label="学科名称">
              <el-input
                v-model="queryData.subjectName"
                placeholder="请输入学科名称"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button icon="el-icon-search" @click="resetBtn"
                >清除</el-button
              >
              <el-button type="primary" icon="el-icon-refresh" @click="initData"
                >搜索</el-button
              >
            </el-form-item>
          </el-col>
          <el-col :span="2">
            <el-form-item>
              <el-button type="primary" @click="$refs.addList.showDialog = true"
                ><i class="el-icon-edit"></i>新增学科</el-button
              >
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <!-- <el-alert
            show-icon
            :closable="false"
            :title="`数据一共${total}条`"
            type="info"
          >
          </el-alert> -->
          <el-alert :title="`数据一共${total}条`" type="info" show-icon>
          </el-alert>
        </el-row>
      </el-form>
      <br />
      <!-- 表格区域 -->
      <el-table border :data="subjectList">
        <!-- <el-table-column label="">
          <template slot-scope="scope">
            {{ userinfo(scope, scope.row) }}
          </template>
        </el-table-column> -->
        <el-table-column type="index" label="序号" width="80px" />
        <el-table-column prop="subjectName" label="学科名称" />
        <el-table-column prop="username" label="创建者"> </el-table-column>
        <el-table-column prop="addDate" label="创建日期">
          <template slot-scope="scope">
            {{
              scope.row.addDate.substr(0, 10) +
              " " +
              scope.row.addDate.substr(11, 8)
            }}
          </template>
        </el-table-column>
        <el-table-column prop="isFrontDisplay" label="前台是否显示">
          <template slot-scope="scope">
            {{ scope.row.isFrontDisplay === 1 ? "是" : "否" }}
          </template>
        </el-table-column>
        <el-table-column prop="twoLevelDirectory" label="二级目录" />
        <el-table-column prop="tags" label="标签"> </el-table-column>
        <el-table-column prop="totals" label="题目数量"> </el-table-column>
        <el-table-column label="操作" fixed="right" width="280">
          <template slot-scope="scope">
            <el-link
              target="_blank"
              @click="
                $router.push({
                  path: 'directorys',
                  query: { id: scope.row.id },
                })
              "
              >学科分类</el-link
            >&nbsp;&nbsp;
            <el-link
              type="primary"
              @click="
                $router.push({
                  path: 'tags',
                  query: { id: scope.row.id },
                })
              "
              >学科标签</el-link
            >&nbsp;&nbsp;
            <el-link type="success" @click="editBtn(scope.row.id)">修改</el-link
            >&nbsp;&nbsp;
            <el-link type="warning" @click="delSubject(scope.row.id)"
              >删除</el-link
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页组件 -->
      <el-row type="flex" justify="end" align="middle" style="height: 60px">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryData.page"
          :page-size="queryData.pagesize"
          :page-sizes="[10, 20, 30, 40]"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
        />
      </el-row>
    </el-card>
    <!-- 新增学科组件 -->
    <addList ref="addList" @updateList="initData"></addList>
  </div>
</template>

<script>
import {
  getSubjectListApi,
  getSubjectInfoApi,
  delSubjectApi,
} from "@/api/subjects";
import addList from "@/views/subjects/list/components/add-list";
export default {
  name: "ListPage",
  components: { addList },
  data() {
    //新增学科查重
    const checkSublistRepeat = async (rule, value, cb) => {
      //先找到左右的学科名称
      let { items } = await getSubjectListApi();
      //找到兄弟们,判断是否和兄弟们同名
      let isRepeat = false;
      // if(this.$refs.addList.formData.id){
      //   //添加功能的查重

      // }else{
      //   //修改功能的查重
      //   isRepeat = items.some
      // }
      isRepeat = items.some((item) => {
        item.subjectName === value;
      });
      isRepeat ? cb(new Error(`已经存在${value}这个学科名称`)) : cb();
    };
    return {
      subjectList: [],
      queryData: { subjectName: "", page: 1, pagesize: 10 },
      total: 0,
      formRules: {
        subjectName: [
          { required: true, message: "请输入学科名称", trigger: "blur" },
          { validator: checkSublistRepeat, trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    userinfo(s, r) {
      // console.log(s, r, "88888888888");
    },
    async initData() {
      //得到学科表格数据
      let { counts, items } = await getSubjectListApi(this.queryData);
      this.subjectList = items;
      // console.log(items, "99090444");
      this.total = counts;
    },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.queryData.pagesize = val;
      this.initData();
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.queryData.page = val;
      this.initData();
    },
    //删除学科
    async delSubject(id) {
      await this.$confirm("你确定要删除吗");
      await delSubjectApi(id);
      this.$message.success("删除成功");
      if (this.queryData.page > 1 && this.subjectList.length === 1) {
        this.queryData.page--;
      }
      this.initData();
    },
    //修改学科
    async editBtn(id) {
      this.$refs.addList.showDialog = true;
      //请求学科详情数据
      let res = await getSubjectInfoApi(id);
      console.log(res, "9090666");
      this.$refs.addList.formData = res;
      this.$refs.addList.formData.isFrontDisplay = String(
        this.$refs.addList.formData.isFrontDisplay
      );
      // this.initData();
    },

    //清除重置按钮
    resetBtn() {
      this.queryData = {};
      this.initData();
    },
  },
  created() {
    this.initData();
  },
};
</script>

<style>
</style>
